<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!--/* 加载IE8兼容性片段 */-->
<head>
    <title>问题工单</title>
    <!--/* 加载全局样式 */-->
    <th:block th:replace="common/thinDecorator::globalStyle"></th:block>
    <!--/* 加载全局主题样式 */-->
    <th:block th:replace="common/thinDecorator::globalThemeStyle"></th:block>
    <!--/* 加载全局布局样式 */-->
    <th:block th:replace="common/thinDecorator::globalLayoutStyle"></th:block>
    <style>
        #transfer-dialog {
            width: 300px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body class="page-content-white page-container-bg-solid" style="overflow-x: hidden;">
<div class="page-wrapper">
    <!-- BEGIN CONTAINER -->
    <div class="page-container">
        <!-- BEGIN CONTENT -->
        <div class="page-content-wrapper">
            <!-- BEGIN CONTENT BODY -->
            <div class="page-content">
                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet light">
                            <div class="portlet-title">
                                <div class="caption font-blue">
                                    <i class="fa fa-table font-blue"></i>问题工单台账
                                </div>
                                <div class="actions">
                                    <button type="button" class="btn btn-success " onclick="App.search()">搜索
                                    </button>
                                    <button type="button" class="btn btn-default" onclick="App.reset()">重置
                                    </button>
                                    <button onclick="dataList.handleOrders()" class="btn btn-success">接单
                                    </button>
                                    <button onclick="dataList.handleTransfer()" class="btn btn-danger">转交
                                    </button>
                                    <button onclick="dataList.handleResolve()" class="btn btn-warning">处理
                                    </button>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <table id="table" style="width:100%;"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END CONTENT BODY -->
        </div>
        <!-- END CONTENT -->
    </div>
</div>
<div id="transfer-dialog">

</div>
<div id="scripts">
    <!--/* 加载IE8兼容性脚本 */-->
    <th:block th:replace="common/thinDecorator::IE8FixScripts"/>
    <!--/* 加载核心插件脚本 */-->
    <th:block th:replace="common/thinDecorator::corePluginsScripts"/>
    <!--/* 加载全局主题脚本 */-->
    <th:block th:replace="common/thinDecorator::globalThemeScripts"/>
    <!--/* 加载全局布局脚本 */-->
    <th:block th:replace="common/thinDecorator::globalLayoutScripts"/>
    <th:block th:replace="common/thinDecorator::globalsetupScripts"/>
    <script th:inline="javascript">
        $(function () {
            dataList.init();
        });

        const statusList = [
            {code: '', name: '所有'},
            {code: 1, name: '未处理'},
            {code: 2, name: '处理中'},
            {code: 3, name: '已处理'},
            {code: 4, name: '已关闭'},
            {code: 5, name: '被打回'}
        ]
        const status = {
            NOT_RESOLVE: {code: 1, name: '未处理'},
            RESOLVING: {code: 2, name: '处理中'},
            RESOLVED: {code: 3, name: '已处理'},
            CLOSED: {code: 4, name: '已关闭'},
            RETURN: {code: 5, name: '被打回'}
        }

        const dataList = {
            handler: {},
            easyuiTableInput: {},//记录查询框输入值
            //初始化
            init: function () {
                this.easyuiTableInput = localStorageManage.get("table", "searchForm");
                if (!this.easyuiTableInput) {
                    this.easyuiTableInput = {
                        searchData: {},
                        queryParams: {},
                    };
                } else {
                    //写form表单查询
                }
                App.countHeight("table");
                this.createDataGrid();
            },
            createDataGrid: function () {
                $("#table").datagrid({
                    url: "/qa/question/myorder/datagrid",
                    height: App.getPortletInnerHeight(),
                    queryParams: this.easyuiTableInput.queryParams,
                    frozenColumns: [
                        [
                            {field: 'checkbox', checkbox: true, align: "center", width: 35,},
                            {
                                field: 'number',
                                title: '序号',
                                align: "center",
                                width: 35,
                                formatter: function (data, row, index) {
                                    return index + 1;
                                }
                            },
                            {
                                "field": "id", title: "操作", width: 120, sortable: false,
                                formatter: function (data, row, index) {
                                    return '<a onclick="dataList.doResolve({id: \''+ data +'\',statusStr: \''+ row.status +'\'})">去处理</a>'
                                }
                            },
                        ]
                    ],
                    columns: [
                        [

                            {
                                "field": "qualityStandardName", title: "数据质量名称", width: 160, sortable: false,
                                formatter: function (data, row, index) {
                                    return data;
                                }
                            },
                            {
                                "field": "version", title: "版本号", width: 80, sortable: false,
                                formatter: function (data, row, index) {
                                    return data;
                                }
                            },
                            {
                                "field": "name", title: "工单名称", width: 160, sortable: false,
                                formatter: function (data, row, index) {
                                    return data;
                                }
                            },
                            {
                                "field": "createTime", title: "工单生成时间", width: 160, sortable: false,
                                formatter: function (data, row, index) {
                                    return data;
                                }
                            },
                            {
                                "field": "orderTime", title: "接单时间", width: 160, sortable: false,
                                formatter: function (data, row, index) {
                                    return data;
                                }
                            },
                            {
                                "field": "completeTime", title: "处理完成时间", width: 160, sortable: false,
                                formatter: function (data, row, index) {
                                    return data;
                                }
                            },
                            {
                                "field": "returnTime", title: "被打回时间", width: 160, sortable: false,
                                formatter: function (data, row, index) {
                                    return data;
                                }
                            },
                            {
                                "field": "status", title: "处理状态", width: 100, sortable: false,
                                formatter: function (data, row, index) {
                                    for (let s in status) {
                                        if (status[s].code === data) {
                                            return status[s].name
                                        }
                                    }
                                    return '未处理'
                                }
                            },
                            {
                                "field": "handlerName", title: "处理人", width: 100, sortable: false,
                                formatter: function (data, row, index) {
                                    return data || '无'
                                }
                            },
                        ]
                    ],
                    fitColumns: false,//自适应
                    remoteFilter: true,
                    remoteSort: true,
                    clientPaging: false,
                    singleSelect: false,//单选
                    checkOnSelect: true,
                    striped: true, //表格设置为条纹
                    emptyMsg: "表中数据为空",
                    pagination: true,//分页
                    pagePosition: "bottom",
                    pageList: [20, 50, 100],
                    pageSize: 20,
                    automaticPolling: false,
                    onDblClickRow: function (rowIndex, row) {
                        location.href = '/qa/question/myorder/detail?id=' + row.id
                    }
                });
                $.ajax({
                    url: '/qa/question/order/user/list',
                    method: 'get',
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 200) {
                            let data = res.data
                            let orderUsers = ([{id: '', username: '', text: '所有'}]).concat(data)
                            dataList.createFilter({orderUsers: orderUsers});
                        }
                    }
                })
            },
            //模糊查询
            createFilter: function ({orderUsers}) {
                $('#table').datagrid('enableFilter', [
                    {"field": "number", type: 'label',},
                    {"field": "id", type: 'label',},
                    {
                        "field": "qualityStandardName", type: 'textbox', options: {
                            value: dataList.easyuiTableInput.searchData.qualityStandardName,
                        }
                    },
                    {
                        "field": "version", type: 'textbox', options: {
                            value: dataList.easyuiTableInput.searchData.version,
                        }
                    },
                    {
                        "field": "name", type: 'textbox', options: {
                            value: dataList.easyuiTableInput.searchData.name,
                        }
                    },
                    {"field": "createTime", type: 'datebox', options: {
                            value: dataList.easyuiTableInput.searchData.createTime,
                        }
                    },
                    {"field": "orderTime", type: 'datebox', options: {
                            value: dataList.easyuiTableInput.searchData.orderTime,
                        }
                    },
                    {"field": "completeTime", type: 'datebox', options: {
                            value: dataList.easyuiTableInput.searchData.completeTime,
                        }
                    },
                    {"field": "returnTime", type: 'datebox', options: {
                            value: dataList.easyuiTableInput.searchData.returnTime,
                        }
                    },
                    {
                        "field": "status", type: 'combobox', options: {
                            valueField: 'code',
                            textField: 'name',
                            editable: false,
                            data: statusList,
                            method: 'GET',
                            value: dataList.easyuiTableInput.searchData.status,
                        }
                    },
                    {
                        "field": "handlerName", type: 'combobox', options: {
                            valueField: 'username',
                            textField: 'text',
                            editable: false,
                            data: orderUsers,
                            value: dataList.easyuiTableInput.searchData.handlerName,
                        }
                    },
                ]);
                // var searchBtn = '<a class="table-action" style="margin-left: 1px" onclick="App.search()">查询</a>';
                // $('.datagrid-filter-row td[field="number"]').html(searchBtn);
            },
            edit: function () {
                const row = $("#table").datagrid("getSelected");
                if (0 !== row.stateId) {
                    $.messager.alert("该数据无法编辑", " ", "error");
                    return false;
                }
                $.messager.alert("该数据无法编辑", " ", "error");
            },
            back: function () {
                $.messager.alert("该数据无法编辑", " ", "error");
            },
            /**
             * 选中行检查
             * @param rows 选中行
             * @param status 工单状态
             * @returns {boolean}
             */
            checkRows: function ({rows, status}) {
                if (!rows || rows.length === 0) {
                    toastr['warning']('请至少选择一条数据', '提示')
                    return false
                }
                for (let row of rows) {
                    if (row.status !== status) {
                        toastr['warning']('选择的其中一条数据不符合要求', '提示')
                        return false
                    }
                }
                return true
            },
            /**
             * 提取选中行所有id
             * @param rows
             * @returns {*[]}
             */
            getCheckedIds: function ({rows: rows}) {
                let ids = []
                for (let row of rows) {
                    ids.push(row.id)
                }
                return ids
            },
            handleOrders: function () {
                let rows = $('#table').datagrid('getChecked')
                if (!this.checkRows({rows: rows, status: status.NOT_RESOLVE.code})) {
                    return
                }
                let ids = this.getCheckedIds({rows: rows})
                $.messager.confirm("接单提醒", "请确认是否接单？", function (boo) {
                    if (boo) {
                        dataList.doOrders({ids: ids})
                    }
                })
            },
            doOrders: function ({ids}) {
                $.ajax({
                    url: '/qa/question/myorder/orders',
                    method: 'post',
                    contentType: 'application/json',
                    data: JSON.stringify(ids),
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 200) {
                            toastr['success']('接单成功', '提示')
                            $('#table').datagrid('reload')
                        } else {
                            toastr['error'](res.msg, '失败')
                        }
                    }
                })
            },
            doTransfer: function ({ids}) {
                let userId = dataList.handler.id
                if (!userId) {
                    toastr['error']('请选择接收人', '失败')
                    return
                }
                $.ajax({
                    url: '/qa/question/myorder/transfer',
                    method: 'post',
                    contentType: 'application/json',
                    data: JSON.stringify({ids: ids, handler: userId}),
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 200) {
                            toastr['success']('转交成功', '提示')
                            $('#table').datagrid('reload')
                        } else {
                            toastr['error'](res.msg, '失败')
                        }
                    }
                })
            },
            handleTransfer: function () {
                let rows = $('#table').datagrid('getChecked')
                if (!this.checkRows({rows: rows, status: status.NOT_RESOLVE.code})) {
                    return
                }
                let ids = this.getCheckedIds({rows: rows})
                let html = '    <div>\n' +
                    '        <label>\n' +
                    '            接收人：\n' +
                    '            <input class="easyui-combobox" id="orderHandler"/>\n' +
                    '        </label>\n' +
                    '    </div>'
                $('#transfer-dialog').html(html).dialog({
                    title: '问题工单转交',
                    closed: true,
                    cache: false,
                    modal: true,
                    iconCls: 'icon-save',
                    buttons: [{
                        text: '返回',
                        handler: function () {
                            dataList.handler = {}
                            $('#transfer-dialog').dialog('close')
                        }
                    }, {
                        text: '确定',
                        handler: function () {
                            $.messager.confirm("转交提醒", "请确认是否转交工单？", function (boo) {
                                if (boo) {
                                    dataList.doTransfer({ids: ids})
                                }
                            })
                        }
                    }],
                    onOpen: function () {
                        // 初始化成功后加载模板选择下拉框
                        App.get('/qa/question/user/list', function (res) {
                            $('#orderHandler').combobox({
                                data: res.data,
                                valueField: 'id',
                                textField: 'username',
                                onChange: function (newVal, oldVal) {
                                    dataList.handler.id = newVal
                                },
                            })
                        })
                    },
                }).dialog('open')
            },
            handleResolve: function () {
                let row = $('#table').datagrid('getSelected')
                if (!row || (row.status !== status.RESOLVING.code && row.status !== status.RETURN.code)) {
                    toastr['warning']('该状态的工单不能处理', '提示')
                    return
                }
                location.href = '/qa/question/myorder/detail?method=edit&id=' + row.id
            },
            doResolve: function ({id, statusStr}) {
                let s = Number.parseInt(statusStr) || 0
                if (!id || (s !== status.RESOLVING.code && s !== status.RETURN.code)) {
                    toastr['warning']('该状态的工单不能处理', '提示')
                    return
                }
                location.href = '/qa/question/myorder/detail?method=edit&id=' + id
            },
        };
    </script>
</div>
<!-- END CONTAINER -->
</body>

</html>